<template>
  <div class="container" style="padding: 20px">

      <!-- 头部 -->
      <questionHeader></questionHeader>
      <!-- 提示条 -->
      <message :counts="counts" class="message"></message>
      <!-- 列表 -->
      <list ref="list" :list="list" style="margin-bottom:15px"></list>
      <!-- 分页组件 -->
      <page
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :counts="counts"
      ></page>

  </div>
</template>

<script>
import questionHeader from '../components/questions/questionHeader.vue'
import message from '../components/questions/message.vue'
import list from '../components/questions/list.vue'
import page from '../components/questions/page.vue'
import { list as getList } from '@/api/hmmm/questions'

export default {
  name: 'questions',
  components: {
    questionHeader,
    message,
    list,
    page
  },
  data () {
    return {
      list: [],
      // 分页阈值
      pageform: {},
      // 数据总量
      counts: null,
      // 第一次刷新默认每页条数
      pagesize: 2,
      // 当前页
      current: 1
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 基础题库列表
    async getList (form) {
      // console.log(form);
      const currentPage = Math.ceil((this.counts - 1) / this.pagesize)
      this.current = this.current > currentPage ? currentPage : this.current
      this.current = this.current < 1 ? 1 : this.current
      // this.currentPage = page
      const { data } = await getList({
        ...form,
        page: this.current,
        pagesize: this.pagesize
      })
      // console.log(data);
      this.list = data.items
      this.counts = data.counts
    },
    // 改变页面条数
    async handleSizeChange (pagesize, current) {
      this.pagesize = pagesize
      this.current = current
      // this.getList()
      const { data } = await getList({
        ...this.pageform,
        page: this.current,
        pagesize: this.pagesize
      })
      // console.log(data);
      this.list = data.items
      this.counts = data.counts
    },
    // 改变当前页数
    async handleCurrentChange (current, pagesize) {
      this.pagesize = pagesize
      this.current = current
      // this.getList()
      const { data } = await getList({
        ...this.pageform,
        page: this.current,
        pagesize: this.pagesize
      })
      // console.log(data);
      this.list = data.items
      this.counts = data.counts
    }
  }
}
</script>
<style scoped lang='less'>
.container {
  background-color: #fff;
  margin: 12px;
  padding: 10px;
}
.message{
   margin-bottom: 15px;
}
</style>
